<template>
  <div class="channel-edit">
    <van-cell title="我的频道" :border="false">
      <van-button
        size="mini"
        round
        type="danger"
        plain
        @click="isEdit = !isEdit"
      >{{ isEdit ? '完成' : '编辑' }}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="(item, index) in myChannels"
        :key="item.id"
        @click="myChannelsItemFn(item, index)"
      >
        <van-icon v-show="isEdit && item.id !== 0" slot="icon" name="close" />
        <span
          slot="text"
          class="channel-name"
          :class="{'current': index === active}"
        >
          {{item.name}}
        </span>
      </van-grid-item>
    </van-grid>

    <van-cell title="频道推荐" :border="false"></van-cell>
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item
        @click="addMyChannels(item)"
        class="channel-item"
        v-for="item in recommendChannels"
        :key="item.id"
        :text="item.name"
        icon="plus"
      />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addMyChannels, delMyChannels } from '@/api/channels'
import { setStorage } from '@/utils/storage'

export default {
  name: 'channel-edit',
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      allChannels: [],
      isEdit: false
    }
  },
  created() {
    this.getAllChannelsFn()
  },
  methods: {
    async getAllChannelsFn() {
      try {
        const { data: {data: {channels}} } = await getAllChannels()

        this.allChannels = channels
      } catch(err) {
        console.log(err)
      }
    },
    async addMyChannels(item) {
      this.myChannels.push(item)

      if(this.$store.state.user.token) {
        // 登录
        const { data: {message} } = await addMyChannels({
          id: item.id,
          seq: this.myChannels.length
        })

        this.$toast(message)
      } else {
        // 没登录
        setStorage('USER_CHANNELS', this.myChannels)
      }
    },
    myChannelsItemFn(item, index) {
      if(this.isEdit) {
        if(index === 0) {
          return
        }

        this.myChannels.splice(index, 1)

        if(index <= this.active){
          this.$emit('giveChannel', this.active - 1, true)
        }

        this.localMyChannel(item)

      } else {
        this.$emit('giveChannel', index, false)
      }
    },
    async localMyChannel(item) {
      if(this.$store.state.user.token) {
        await delMyChannels(item.id)

        this.$toast('删除成功')
      } else {
        setStorage('USER_CHANNELS', this.myChannels)
      }
    }
  },
  computed: {
    recommendChannels() {
      return this.allChannels.filter(all => {
        return !this.myChannels.find(my => {
          return my.id === all.id
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  padding-top: 80px;
  .channel-item {
    height: 86px;
    /deep/ .van-grid-item__content {
      background-color: #f5f5f6;
      .van-grid-item__text, .channel-name {
        color: #222;
        font-size: 28px;
      }

      .current{
        color:red;
      }
    }
  }

  /deep/ .van-grid-item__icon-wrapper {
    position: unset;
  }
/deep/ .recommend-grid {
    .van-grid-item__content {
      flex-direction: row;
      color: #222;
      .van-icon {
          font-size: 24px;
      }

      .van-grid-item__text {
          font-size: 28px;
          margin-top: 0;
      }
    }
  }

  /deep/ .van-icon-close {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 36px;
    color: #ccc;
  }

  /deep/ .van-grid-item__icon+.van-grid-item__text {
    margin-top: 0;
  }
}
</style>

